<template>
  <div class="disLibraryEdit detailView">
    <Modal v-model="isView"
           :mask-closable="false"
           :title="title"
           :footer-hide="true">
      <el-form :model="formModel"
               label-position="right"
               label-width="100px"
               :rules="rules"
               ref="form">
        <el-form-item label="图标"
                      prop="imageUrl">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="formModel.imageUrl"
                 :src="formModel.imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="名称"
                      prop="name">
          <el-input v-model="formModel.name"
                    placeholder="请输入名称"
                    type="text" />
        </el-form-item>
        <el-form-item label="介绍"
                      prop="introduceUrl">
          <el-input v-model="formModel.introduceUrl"
                    type="textarea"
                    placeholder="请输入介绍"
                    :rows="4" />
        </el-form-item>
      </el-form>
      <div class="operationView">
        <el-button type="primary"
                   @click="isView = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleSave">保 存</el-button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "disLibraryEdit",
    data () {
      return {
        title: '新增疾病库',
        isView: false,
        imageUploadUrl: this.api.file.upload,
        formModel: {
          id: 0,
          imageUrl: '',
          name: '',
          introduceUrl: ''
        },
        rules: {
          imageUrl: [
            { required: true, message: '请上传图标', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          introduceUrl: [
            { required: true, message: '请输入介绍', trigger: 'blur' }
          ]
        },
      }
    },
    methods: {
      openView (row) {
        this.isView = true;
        this.$refs['form'].resetFields();
        if (row) {
          this.formModel = row;
        } else {
          this.formModel = {
            id: 0,
            imageUrl: '',
            name: '',
            introduceUrl: ''
          }
        }
      },

      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.post(this.api.disLibraryEdit.url, this.formModel).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('保存成功！');
                this.isView = false;
                this.$emit('getList');
              }
            })
          }
        })
      },
      handleAvatarSuccess (res) {
        if (res.code === '200') {
          this.$message.success('上传成功!');
          this.$set(this.formModel, 'imageUrl', res.object[0]);
        } else {
          this.$message.success('上传失败!');
        }
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
  }
</script>
<style scoped lang="scss">
  .avatar {
    width: 98px;
    height: 98px;
  }
</style>
